"use client";

import { AlertTriangle } from "lucide-react";
import { useSearchParams } from "next/navigation";
import { Suspense, useActionState, useEffect } from "react";

import { Alert, AlertDescription } from "~/components/ui/alert";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Ripple } from "~/components/ui/ripple";
import { VoraLogo } from "~/components/vora/vora-logo";
import type { ActionState } from "~/lib/actions";

import { signIn } from "../actions";

function SignInForm() {
  const searchParams = useSearchParams();
  const returnUrl = searchParams.get("returnUrl");

  const [state, formAction, pending] = useActionState<ActionState, FormData>(
    signIn,
    { error: "" },
  );

  useEffect(() => {
    if (state?.success) {
      window.location.href = state.redirectTo;
    }
  }, [state]);

  return (
    <div className="bg-background relative min-h-screen">
      <div className="absolute top-4 left-4 z-10">
        <VoraLogo logoClassName="h-[40px]" />
      </div>
      <div className="flex min-h-screen">
        <div className="relative flex flex-1 items-center justify-center p-4 lg:p-8">
          <div className="w-full max-w-sm">
            <div className="mb-4 flex flex-col items-center justify-center gap-4">
              <h1 className="text-foreground text-2xl font-semibold">
                登录您的账户
              </h1>
            </div>
            <form className="space-y-3" action={formAction}>
              <input type="hidden" name="returnUrl" value={returnUrl ?? ""} />
              <Input
                id="email"
                name="email"
                type="text"
                placeholder="账号"
                className="h-10 rounded-lg"
                required
                disabled={pending}
              />
              <Input
                id="password"
                name="password"
                type="password"
                placeholder="密码"
                className="h-10 rounded-lg"
                required
                disabled={pending}
              />
              <div className="pt-2">
                <div className="relative">
                  <div className="flex w-full flex-col gap-y-4">
                    {Boolean(state?.error) && (
                      <Alert variant="destructive" className="w-full">
                        <AlertTriangle className="h-4 w-4" />
                        <AlertDescription>{state.error}</AlertDescription>
                      </Alert>
                    )}
                    <Button
                      type="submit"
                      aria-disabled={pending}
                      disabled={pending}
                    >
                      {pending ? "登录中..." : "登录"}
                    </Button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div className="bg-sidebar relative hidden flex-1 items-center justify-center overflow-hidden lg:flex">
          <div className="absolute inset-0">
            <Ripple />
          </div>
        </div>
      </div>
    </div>
  );
}

export default function Page() {
  return (
    <Suspense
      fallback={
        <div className="bg-background flex min-h-screen items-center justify-center">
          <div className="border-primary h-8 w-8 animate-spin rounded-full border-2 border-t-transparent"></div>
        </div>
      }
    >
      <SignInForm />
    </Suspense>
  );
}
